<template>
    <div>
        <el-button type="primary" @click="add">添加</el-button>
    </div>
    <el-table :data="announcementList" style="width: 100%">
        <el-table-column label="图片" width="500">
            <template #default="scope">
                <div style="position: absolute;
                    width: 100%;
                    height: 100%;
                    z-index: 999; background-color:rgba(255,255,255,0.3);"
                    v-show="(scope.$index == indexRecord && scope.row.imgUrl != '')">
                    <el-icon style="position: absolute; left: 46%; top: 40%;" @click="removeImge(scope.$index)">
                        <DeleteFilled />
                    </el-icon>
                </div>
                <el-upload v-show="scope.row.imgUrl == ''" class="upload-demo" drag
                    action="http://101.43.43.184:8083/admin/scenic/saveSnapshot" :on-preview="uploadPreview(scope.$index)"
                    :on-success="uploadImage" name="scenicSnapshots">
                    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                </el-upload>
                <el-image style="width: 100%; height: 160px" :src="scope.row.imgUrl" :fit="fit"
                    @mouseenter="showDelImage(scope.$index)" v-show="scope.row.imgUrl != ''" />
            </template>
        </el-table-column>
        <el-table-column label="链接" width="500">
            <template #default="scope">
                <el-input v-model="scope.row.linkUrl" placeholder="请输入链接" />
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="primary" @click="del(scope.$index)">删除</el-button>
                <el-button type="primary" @click="saveScroll(scope.$index)">保存</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import { ElNotification } from 'element-plus'
import { DeleteFilled, UploadFilled } from '@element-plus/icons-vue'
import { addOrUpdate, scrollList, deleteScrollList } from '../request/apiRequest'
const indexRecord = ref(-1);
let announcementIndex = ref(-1)
let announcementList = ref([
    {
        imgUrl: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        linkUrl: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
    }, {
        imgUrl: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        linkUrl: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
    }, {
        imgUrl: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        linkUrl: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
    }, {
        imgUrl: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        linkUrl: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
    }
])

onBeforeMount(() => {
    getScrollList()
})
const getScrollList = () => {
    scrollList().then((data) => {
        announcementList.value = data.data
        console.log(announcementList)
    }).catch((response) => {
        console.log(response)
    })
}
const del = (index) => {
    const obj = announcementList.value[index - 1]
    deleteScrollList(obj.id).then((data) => {
        if (data.code === 200) {
            ElNotification({
                title: '删除通知',
                message: "删除成功",
            })
        }
    }).catch((response) => {
        console.log(response)
        const msg = response.message
        ElNotification({
            title: '删除通知',
            message: msg,
        })
    })
    announcementList.value.splice(index, 1)
}
const add = () => {
    announcementList.value.push({ imgUrl: "", url: "" })
}
const saveScroll = (index) => {
    const obj = announcementList.value[index - 1];
    const params = {
        id: obj.id,
        imgUrl: obj.imgUrl,
        linkUrl: obj.linkUrl
    }
    addOrUpdate(params).then((data) => {
        if (data.code === 200) {
            ElNotification({
                title: '修改通知',
                message: "修改成功",
            })
        }
        getScrollList()
    }).catch((response) => {
        const msg = response.message
        ElNotification({
            title: '修改通知',
            message: msg,
        })
    })

}
const uploadPreview = (index) => {
    announcementIndex.value = index
}
const removeImge = (index) => {
    announcementList[index].bannerImage = ""
}
const showDelImage = (index) => {
    indexRecord.value = index
    console.log(index)
}
const uploadImage = (response, uploadFile, uploadFiles) => {
    const code = response.code
    if (code != 200) {
        ElNotification({
            title: '文件上传',
            message: "文件上传失败",
        })
    } else {
        console.log(announcementIndex.value)
        announcementList.value[announcementIndex.value - 1].imgUrl = "http://101.43.43.184:8083" + response.data[0]
    }
    console.log(uploadFile)
    console.log(uploadFiles)
}
</script>

<style>
.announcement {
    width: 500px;
    margin-top: 10px;
}
</style>